<template>
    <div id="sider">
        <el-carousel @change="carouselChange" direction="vertical" :autoplay="true" indicator-position="none" :height="currentHeight + 'px'">
            <el-carousel-item v-for="(item, index) in data" :key="index">
                <div class="data-show">
                    <div><img :src="item.img" class="data-img" ref="imgHeight" @load="imgLoad(index)"/></div>
                </div>
            </el-carousel-item>
        </el-carousel>
        <div class="data-info">
            {{data[currentIndex].info}}
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [
                // { img: require("../../assets/test.jpg"), info: "测试" },
                // { img: require("../../assets/test2.jpg"), info: "测试2" },
                // { img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", info: "测试3"}
            ],
            currentIndex: 0,
            imgHeight: [],
            currentHeight: 0,
        };
    },
    methods: {
        getData() {
            this.$axios.get("/video/data/person/3")
            .then(response => {
                
            }).catch(error => {

            })
        },
        // 动态获取图片宽度，用于渲染 el-aside 宽度
        imgLoad(index) {
            this.$nextTick(() => {
                // this.imgHeight[index] = this.$refs.imgHeight[index].height;
                this.currentHeight = this.$refs.imgHeight[0].height;
            });
        },
        carouselChange(value) {
            this.currentIndex = value;
            this.currentHeight = this.$refs.imgHeight[value].height;
        }
    },
};
</script>

<style scoped>
#sider {
    margin: 0px 5px 5px 0;
}
.el-main {
    padding: 0px;
}
.data-show {
    position: relative;
    height: 100%;
}
.data-img {
    width: 100%;
    object-fit: contain;
    max-height: 100%;
}
.data-info {
    padding: 10px 0 15px 0;
    color: white;
    background-color: rgba(0, 0, 0, 0.25)
}
</style>